<template>
  <div class="PredictView">
    <!-- 首行-条件选择 -->
    <div class="flexbox" style="margin-top: calc((100vw - 80px) * 0.01)">
      <div
        class="databox box-shadow"
        style="width: 97.5%; display: flex; flex-direction: row"
      >
        <a-cascader
          :options="analyticsData.cq_area_comm_data"
          :load-data="loadData"
          placeholder="请选择"
          @change="onChange"
          style="flex: 1"
        />
        <a-button
          type="primary"
          :loading="loading"
          @click="enterLoading"
          style="margin-left: 1rem"
        >
          开始分析
        </a-button>
      </div>
    </div>
    <!-- 第一行 -->
    <div class="flexbox" style="margin-top: calc((100vw - 80px) * 0.01)">
      <!-- 第一个 -->
      <div
        v-if="area_price_change_options.chartOptions"
        class="databox box-shadow"
        style="width: 48%; height: auto"
      >
        <h2 style="font-weight: 600; color: rgb(51, 51, 51); display: flex">
          {{ area_name }}-房价趋势变化
        </h2>
        <p class="mb-0 flex">该项数据只统计{{ area_name }}区县内近十年数据</p>
        <div>
          <apex-chart
            width="100%"
            height="300"
            :options="area_price_change_options.chartOptions"
            type="line"
            :series="area_price_change_options.series"
          ></apex-chart>
        </div>
      </div>
      <!-- 第二个 -->
      <div
        v-if="comm_price_change_options.chartOptions"
        class="databox box-shadow"
        style="width: 48%; height: auto"
      >
        <h2 style="font-weight: 600; color: rgb(51, 51, 51); display: flex">
          {{ comm_name }}-房价趋势变化
        </h2>
        <p class="mb-0 flex">该项数据只统计{{ comm_name }}区域内近十年数据</p>
        <div>
          <apex-chart
            type="line"
            height="300"
            :options="comm_price_change_options.chartOptions"
            :series="comm_price_change_options.series"
          />
        </div>
      </div>
    </div>
    <!-- 第二行 -->
    <div class="flexbox" style="margin-top: calc((100vw - 80px) * 0.01)">
      <!-- 第一个 -->
      <div
        v-if="area_price_predict_options.chartOptions"
        class="databox box-shadow"
        style="width: 48%; height: auto"
      >
        <h2 style="font-weight: 600; color: rgb(51, 51, 51); display: flex">
          {{ area_name }}-房价趋势变化（预测）
        </h2>
        <p class="mb-0 flex">该项数据只预测{{ area_name }}区县未来一年的数据趋势</p>
        <div>
          <apex-chart
            width="100%"
            height="300"
            :options="area_price_predict_options.chartOptions"
            type="line"
            :series="area_price_predict_options.series"
          ></apex-chart>
        </div>
      </div>
      <!-- 第二个 -->
      <div
        v-if="comm_price_predict_options.chartOptions"
        class="databox box-shadow"
        style="width: 48%; height: auto"
      >
        <h2 style="font-weight: 600; color: rgb(51, 51, 51); display: flex">
          {{ comm_name }}-房价趋势变化（预测）
        </h2>
        <p class="mb-0 flex">该项数据只预测{{ comm_name }}区域未来一年的数据趋势</p>
        <div>
          <apex-chart
            type="line"
            height="300"
            :options="comm_price_predict_options.chartOptions"
            :series="comm_price_predict_options.series"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
const base = process.env.NODE_ENV === "development" ? "/api" : "";
import analyticsData from "./data/analyticsData.js";
import {
  // apex_pie,
  // apex_bar,
  apex_datetime_line,
} from "./functions/generalFunction.js";
export default {
  data() {
    return {
      analyticsData: analyticsData,
      //   options: analyticsData,
      area_price_change_options: {},
      comm_price_change_options: {},
      area_price_predict_options: {},
      comm_price_predict_options: {},
      house_avg_mj: {},
      area_name: "待选择",
      comm_name: "待选择",
      loading: false,
    };
  },
  mounted() {
    // this.showareaavgpricebar();
    window.storeChangeRc = this.storeChangeRc;
  },
  methods: {
    // 展示横向折线图
    showareaavgpricebar() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(
        document.getElementById("horizontalCharts3")
      ); //也可以通过$refs.newCharts的方式去获取到dom实例。
      var option = analyticsData.echarts_area_avg_price;

      option && myChart.setOption(option);
    },
    onChange(value) {
      console.log(value);
      console.log("区县:", value[0]);
      console.log("区域:", value[1]);
      console.log("小区:", value[2]);
      this.load_area_comm_data_change(value);
    },
    loadData(selectedOptions) {
      const targetOption = selectedOptions[selectedOptions.length - 1];
      targetOption.loading = true;

      // load options lazily
      setTimeout(() => {
        targetOption.loading = false;
        targetOption.children = [
          {
            label: `${targetOption.label} Dynamic 1`,
            value: "dynamic1",
          },
          {
            label: `${targetOption.label} Dynamic 2`,
            value: "dynamic2",
          },
        ];
        this.options = [...this.options];
      }, 1000);
    },
    // 加载区县房价变化
    load_area_comm_data_change(value) {
      axios({
        method: "post",
        url: base + "analyze_house_price_change",
        data: {
          area: value[0],
          comm: value[1],
          //   comm: value[2],
        },
        headers: { "content-type": "application/x-www-form-urlencoded" },
      })
        .then((response) => {
          this.area_name = value[0];
          this.comm_name = value[1];
          console.log(response.data.data); // 打印成功的结果
          this.area_price_change_options = apex_datetime_line(
            response.data.data.qx_house_price.series,
            response.data.data.qx_house_price.labels,
            "平均价格: "
          );
          this.comm_price_change_options = apex_datetime_line(
            response.data.data.qy_house_price.series,
            response.data.data.qy_house_price.labels,
            "平均价格: "
          );
          this.area_price_predict_options = {};
          this.comm_price_predict_options = {};
        })
        .catch(function (error) {
          console.log(error); // 打印失败的结果
        });
    },
    // 加载区县房价预测
    load_area_comm_data_predict(type, area) {
      axios({
        method: "post",
        url: base + "new_predict_future_price",
        data: {
          type: type,
          area: area,
        },
        headers: { "content-type": "application/x-www-form-urlencoded" },
      })
        .then((response) => {
          console.log(type, ":", response.data.data); // 打印成功的结果
          this.loading = false;
          if (type == "area") {
            this.$message.success(`${this.area_name}区县房价信息分析成功！`, 3);
            this.area_price_predict_options = apex_datetime_line(
              response.data.data.series,
              response.data.data.labels,
              "平均价格: "
            );
          } else if (type == "comm") {
            this.$message.success(`${this.comm_name}区域房价信息分析成功！`, 3);
            this.comm_price_predict_options = apex_datetime_line(
              response.data.data.series,
              response.data.data.labels,
              "平均价格: "
            );
          }
        })
        .catch(function (error) {
          console.log(error); // 打印失败的结果
        });
    },
    // 开始分析
    enterLoading() {
      this.loading = true;
      if (this.area_name == "待选择") {
        const key = `open${Date.now()}`;
        this.$notification.open({
          message: "请先加载需要分析的区域信息",
          description:
            "在整个线性分析预测开始前，区县的信息和加载是有必要的，因为我们需要根据您的时间来进行时间序列分析。.",
          duration: 2,
          btn: (h) => {
            return h(
              "a-button",
              {
                props: {
                  type: "primary",
                  size: "small",
                },
                on: {
                  click: () => this.$notification.close(key),
                },
              },
              "好的 知道了"
            );
          },
          key,
          onClose: close,
        });
        this.loading = false;
        return;
      }
      this.load_area_comm_data_predict("area", this.area_name);
      this.load_area_comm_data_predict("comm", this.comm_name);
    },
  },
};
</script>
<style scoped>
.PredictView {
  flex: 1;
  height: 100vh;
  background-color: #f6f6f7;
  overflow-y: auto;
}
#horizontalCharts3 {
  width: 100%;
  height: 500px;
}
</style>
